import { payFailApi, paySuccessApi, withdrawListApi } from '@/services/api';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import { Button, Tag, message } from 'antd';
import { useRef } from 'react';

const Withdrawal: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const { withdrawal_manage_permissions_confirm } = useAccess() as any;

  const columns: any = [
    {
      title: '手机号',
      dataIndex: 'mobile',
      hideInTable: true,
    },
    {
      title: '商户',
      dataIndex: ['user', 'name'],
      hideInSearch: true,
      render: (text: string, record: any) => {
        return (
          <div>
            {record?.user?.id} - {record?.user?.name}
          </div>
        );
      },
    },
    {
      title: '手机号',
      dataIndex: ['user', 'mobile'],
      hideInSearch: true,
      width: 120,
    },
    {
      title: '提现方式',
      dataIndex: 'mode_text',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '收款账号',
      dataIndex: 'account',
      hideInSearch: true,
      width: 150,
    },
    {
      title: '手机号',
      dataIndex: ['user', 'mobile'],
      hideInSearch: true,
      width: 120,
    },
    // {
    //   title: '在租奖励',
    //   dataIndex: 'nickName',
    //   hideInSearch: true,
    //   width: 120,
    // },
    // {
    //   title: '合计奖励',
    //   dataIndex: 'money',
    //   hideInSearch: true,
    //   width: 120,
    // },
    // {
    //   title: '已提奖励',
    //   dataIndex: 'name',
    //   hideInSearch: true,
    //   width: 120,
    // },
    // {
    //   title: '未提奖励',
    //   dataIndex: 'name',
    //   hideInSearch: true,
    //   width: 120,
    // },
    {
      title: '当前提现金额',
      dataIndex: 'money',
      hideInSearch: true,
    },
    {
      title: '提现申请时间',
      dataIndex: 'create_time',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status_text',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Tag
            color={
              record?.state === 0
                ? 'blue'
                : record?.state === 1
                ? 'success'
                : 'error'
            }
            bordered={false}
          >
            {record?.state_text}
          </Tag>
        );
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 220,
      render: (text: any, record: any) => [
        record?.state_text === '待打款' &&
          withdrawal_manage_permissions_confirm && (
            <>
              <Button
                type="primary"
                key="editabl2e"
                onClick={async () => {
                  try {
                    await paySuccessApi(record.id);
                    message.success('操作成功');

                    // 刷新表格
                    actionRef.current?.reload();
                  } catch (error) {}
                }}
              >
                打款成功
              </Button>

              <Button
                key="editable"
                onClick={async () => {
                  try {
                    await payFailApi(record.id);
                    message.success('操作成功');

                    // 刷新表格
                    actionRef.current?.reload();
                  } catch (error) {}
                }}
              >
                打款失败
              </Button>
            </>
          ),
      ],
    },
  ];

  return (
    <>
      <ProTable
        bordered
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (_parame) => {
          const { pageSize, current, mobile } = _parame;
          const { data } = await withdrawListApi({
            page: current,
            size: pageSize,
            filters: JSON.stringify({
              user__mobile: mobile,
            }),
          });
          return {
            data: data?.list ?? [],
            success: true,
            total: data?.count,
          };
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        scroll={{
          x: 1200,
        }}
        pagination={{
          defaultPageSize: 10,
        }}
        dateFormatter="string"
      />

      {/* {clientDrawerParams.open && (
        <ClientDrawer
          open={clientDrawerParams.open}
          info={clientDrawerParams.info}
          close={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });

            actionRef.current?.reload();
          }}
        ></ClientDrawer>
      )} */}
    </>
  );
};

export default Withdrawal;
